<template>
  <div ref="testMap" style="width:100%">

    <div style="width: 10px;height: 10px;"></div>
    <div v-show="!fieldArguments.textHide" id="r-result">
      地址：<input  type="text" id="suggestId" size="20" v-model="text"  />
      <button @click="search">搜索</button>
      <button  @click="submit">确定</button>
    </div>

    <div style="width: 10px;height: 10px;"></div>
    <div  :id="randomId" style="width:100%"></div>

  </div>
</template>
<script>
  import Common from './js/Common'
  import plugins from '../../register/plugin.js'
  import store from 'store/'

  export default {
    name: 'tencent-map',
    mixins:[Common],
    data () {
      return {
        defaultProps: {
          children: 'child',
          label: 'title',
          value: 'id',
        },
        text:'',
        latLng:'',
        map:'',
        city:'西安',
        baidumap_defaultValue:{},
        randomId:''
      }
    },

    created () {

      const self = this;
      console.log('self.defaultValue',self.defaultValue)
      self.randomId = Math.ceil(Math.random()*10000)+'map';
      console.log('created')

    },

    mounted () {

      const self = this;
      if(self.defaultValue.lat&&self.defaultValue.lng){
        var center = new TMap.LatLng(parseFloat(self.defaultValue.lat),parseFloat(self.defaultValue.lng));
      }else{
        var center = new TMap.LatLng(34.229917, 108.916693);
      };

      //定义map变量，调用 TMap.Map() 构造函数创建地图

      self.map = new TMap.Map(document.getElementById(self.randomId), {
          center: center,//设置地图中心点坐标
      });
      self.geocoder = new TMap.service.Geocoder();
      self.markerLayer = new TMap.MultiMarker({
          id: 'marker-layer',
          map: self.map
      });
      self.markerLayer.add({
        position: center,
        "id": "one",
      });
      //markerLayer = null;
      self.map.on("click",function(evt){
          self.text = '';
          self.latLng = evt.latLng;
          console.log('evt.latLng',evt)
          
          var location = new TMap.LatLng(evt.latLng.lat, evt.latLng.lng);
          
          self.geocoder.getAddress({ location: location }) // 将给定的坐标位置转换为地址
          .then((result) => {
            self.addressInfo = result.result;
            self.mark(self.latLng);
            // 显示搜索到的地址
          });
          
      });

    },
    computed: {

      cascader_attrs () {
        return this.Data.cascader_attrs || {}
      },
      uploadImg () {
        if(this.isArrayFn(this.submit_data[this.data.key])){
          return this.submit_data[this.data.key];
        }else{
          return [];
        }
      }

    },
    watch: {

        defaultValue: {
          deep: true,
          handler (v) {
            const self = this;
            if(self.defaultValue.lat&&self.defaultValue.lng){
              self.latLng = new TMap.LatLng(parseFloat(self.defaultValue.lat),parseFloat(self.defaultValue.lng));
            }else{
              self.latLng = new TMap.LatLng(34.229917, 108.916693);
            };
           self.map.setCenter(self.latLng);
           self.mark(self.latLng);
           self.text = '';
          }
        },

    },
    methods: {

      mark(latLng){
        const self = this;
        self.markerLayer.remove(['one']);
        self.markerLayer.add({
          position: latLng,
          "id": "one",
        });
      },

      async search(){

        const self = this;
        var res = await plugins['api_tencentSuggestion']({
        	data: {
            keyword:this.text
          }
        });
        self.searchLocation = res.data[0];
        self.latLng = new TMap.LatLng(self.searchLocation.location.lat.toFixed(6), self.searchLocation.location.lng.toFixed(6));
        self.map.setCenter(self.latLng);
        self.mark(self.latLng);
      },

      showInfo(e){
          const self = this;
          this.map.clearOverlays();
          var point = new BMap.Point(e.point.lng, e.point.lat);
          var marker = new BMap.Marker(point);  // 创建标注
          marker.enableDragging();
          this.map.addOverlay(marker);
          this.$emit('onChange', {field:self.field,value:e.point});
      },

      submit(){

        const self = this;

        self.$emit('onChange', {field:this.field,value:{
          lat:self.latLng.getLat().toFixed(6),
          lng:self.latLng.getLng().toFixed(6),
        }});

      /*  self.$emit('onChange', {field:{
          key: 'longitude',
        },value:self.latLng.getLng().toFixed(6)}); */

      }

    },

  }
</script>
